<template>
  <div class="user_manage">
    <el-table :data="userData" border style="width: 100%;margin: 0 auto; " resizable :row-key="userData.id">
      <el-table-column fixed prop="id" label="id" width="100" align="center"></el-table-column>
      <el-table-column prop="name" label="用户名" width="200"></el-table-column>
      <el-table-column prop="isAdmin" label="用户权限" width="200"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" width="220" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="手机号" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="account" label="用户账号" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="password" label="用户密码" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">

          <el-button @click="handleClickDel(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="user_Row.name" :visible.sync="dialogFormVisible">
      <el-form :model="user_Row" ref="PieFrom">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="user_Row.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="user_Row.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="user_Row.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="user_Row.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="user_Row.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="user_Row.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcancel">取 消</el-button>
        <el-button type="primary" @click="dialoconfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-button type="text" @click="centerDialogVisible = true">点击添加用户</el-button>

    <el-dialog title="注册账号" :visible.sync="centerDialogVisible" width="30%" center>
      <span>
        <addUser :UserClick="userclick"></addUser>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import addUser from '../../components/addUser.vue'
export default {
  components: { addUser },
  data() {
    return {
      dialogFormVisible: false,
      centerDialogVisible: false,
      formLabelWidth: '120px',
      userData: [],
      user_Row: {},

      is_clici: 1
    }
  },
  methods: {
    axios_user() {
      axios({
        url: 'http://localhost:3000/user',
        method: 'GET'
      }).then(response => {
        this.userData = []
        // console.log(response.data)
        for (let i = 0; i < response.data.length; i++) {
          this.userData.splice(i, 1, response.data[i])
          if (this.userData[i].isAdmin == '1') {
            this.userData[i].isAdmin = '管理员'
          } else {
            this.userData[i].isAdmin = '普通权限'
          }
        }
      })
    },
    // 编辑按钮
    handleClick(row) {
      this.dialogFormVisible = true
      this.user_Row = row
    },
    // 删除按钮
    handleClickDel(row) {
      this.$confirm('此操作将删除该用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          axios({
            url: 'http://localhost:3000/user/' + row.id,
            method: 'DELETE'
          })
            .then(result => {
              console.log(this)
              setTimeout(() => {
                this.axios_user()
              }, 300)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
            .catch(err => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // Pie的取消弹出框
    dialogcancel() {
      this.dialogFormVisible = false
      this.axios_user()
    },
    // Pie的确定弹出框
    dialoconfirm() {
      this.dialogFormVisible = false
      // 修改饼图数据
      this.$refs.PieFrom.validate(data => {
        if (data) {
          axios({
            url: 'http://localhost:3000/user/' + this.user_Row.id,
            method: 'PATCH',
            data: {
              name: this.user_Row.name,
              age: this.user_Row.age,
              sex: this.user_Row.sex,
              phone: this.user_Row.phone,
              account: this.user_Row.account,
              password: this.user_Row.password
            }
          })
            .then(result => {
              // console.log(result)
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.axios_user()
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },
    // 子组件点击
    userclick() {
      // this.is_clici++
      // console.log(this.is_clici)
      // if (this.is_clici >= 1) {

      // }
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.centerDialogVisible = false
      this.axios_user()
      // this.is_clici = 0
    }
  },
  mounted() {
    this.axios_user()
  }
}
</script>

<style lang="less" scoped>
.user_manage {
}
</style>